{% extends 'custom_base_site.html' %}
{% block chart %}
    <script src="/static/vue/vue.js"></script>

    <link rel="stylesheet" href="/static/vue-element/vue-element.css">
    <script src="/static/vue-element/vue-element.js"></script>

    <script src="/static/highcharts/highcharts.js"></script>
    <script src="/static/highcharts/highcharts-more.js"></script>
    <script src="/static/highcharts/modules/exporting.js"></script>
    <script src="/static/highcharts/modules/export-data.js"></script>
    <script src="/static/highcharts/modules/oldie.js"></script>

    <script src="/static/moment/moment.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
    <script src="/static/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

    <link rel="stylesheet" href="/static/bootstrap-select/css/bootstrap-select.min.css">
    <script src="/static/bootstrap-select/js/bootstrap-select.min.js"></script>

    <script src="/static/html-util.js"></script>
    <script src="/static/string-format.js"></script>

    <!-- chart -->
    <div id="container" style="min-width:400px;height:400px"></div>
    <!-- chart end -->
    <div class="form-inline">
        <!-- target selector -->
        <select id="target-selector" class="selectpicker" data-width="fit">
            <option data-tokens="amount" value="amount">销售额</option>
            <option data-tokens="interests" value="interests">毛利润</option>
            <option data-tokens="quantity" value="quantity">销量</option>
            <option data-tokens="rate" value="rate">毛利润/销售额</option>
        </select>
        <script>
            // init set
            let target = "amount";  // amount interests
            $targetSelector = $("#target-selector");
        </script>
        <!-- target selector end -->

        <!-- date picker -->
        <div class='input-group date' id='datetimepicker-start'>
            <input type='text' class="form-control"/>
            <span class="input-group-addon"><span
                    class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <div class='input-group date' id='datetimepicker-end'>
            <input type='text' class="form-control"/>
            <span class="input-group-addon"><span
                    class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <!-- date picker end -->
        <!-- bootstrap class form-group input-group -->
    </div>
    <script type="text/javascript">
        $(function () {
        });
        let start = moment().startOf('year'),
            end = moment();
        // moment(new Date()) moment().toDate()
        $dp_start = $('#datetimepicker-start');
        $dp_end = $('#datetimepicker-end');
        $dp_start.datetimepicker({
            format: 'YYYY-MM-DD',
            showTodayButton: true,
            defaultDate: start,
        });
        $dp_end.datetimepicker({
            format: 'YYYY-MM-DD',
            showTodayButton: true,
            defaultDate: end,
        });
        $dp_start.on("dp.change", function (event) {
            // event.date instanceof moment === true
            $dp_end.data("DateTimePicker").minDate(event.date);
        });
        $dp_end.on("dp.change", function (event) {
            // event.date instanceof moment === true
            $dp_start.data("DateTimePicker").maxDate(event.date);
        });


        let scheme = "",
            domain = "",
            base_url = "{scheme}{domain}".format({"scheme": scheme, "domain": domain}),
            bath_path = "/api-analysis/sale_price_io",
            para_path = "/target/{target}/from/{start}/to/{end}".format({
                "target": target,
                "start": start.format("YYYY-MM-DD"),
                "end": end.format("YYYY-MM-DD")
            }),
            url = "{0}{1}{2}".format(base_url, bath_path, para_path);
        // scheme domain path     `https://`  `www.redfoxatasleep.com`  `/base/path`  `/para/path`  `?key=stringValue`


        let chart, chartOptions, min, max, response;
        $.get(url, function (data, status) {
            response = data;
            min = new Date(response["min"]);
            max = new Date(response["max"]);
            $dp_start.data("DateTimePicker").minDate(min);
            $dp_end.data("DateTimePicker").maxDate(max);

            console.log(response["series"]);


            chartOptions = chart_option = {
                "chart": {
                    "type": 'bubble',
                    "zoomType": 'x',
                    "panning": true,
                    "panKey": 'shift'
                },
                "title": {
                    "text": "Sale {0} With Price".format({
                        "amount": "Amount",
                        "interests": "Interests",
                        "quantity": "Quantity",
                        "rate": "Interests/Amount",
                    }[target])
                },
                "xAxis": {
                    "title": {
                        "text": "售价"
                    },
                    "type": "linear",
                },
                "yAxis": {
                    "title": {
                        "text": "进价"
                    },
                    "type": "linear",
                },
                "series": response["series"]
            };
            chart = Highcharts.chart('container', chartOptions);
        });


        $dp_start.on("dp.change", function (event) {
            // event.date instanceof moment === true
            start = event.date;
            para_path = "/target/{target}/from/{start}/to/{end}".format({
                "target": target,
                "start": start.format("YYYY-MM-DD"),
                "end": end.format("YYYY-MM-DD")
            });
            url = "{0}{1}{2}".format(base_url, bath_path, para_path);
            $.get(url, function (data, status) {
                // data: response from server
                chart.destroy();
                chartOptions["series"] = data["series"];
                chart = Highcharts.chart('container', chartOptions);
            });
        });
        $dp_end.on("dp.change", function (event) {
            // event.date instanceof moment === true
            end = event.date;
            para_path = "/target/{target}/from/{start}/to/{end}".format({
                "target": target,
                "start": start.format("YYYY-MM-DD"),
                "end": end.format("YYYY-MM-DD")
            });
            url = "{0}{1}{2}".format(base_url, bath_path, para_path);
            $.get(url, function (data, status) {
                // data: response from server
                chart.destroy();
                chartOptions["series"] = data["series"];
                chart = Highcharts.chart('container', chartOptions);
            });
        });

        $targetSelector.on(
            'changed.bs.select',
            function (e, clickedIndex, isSelected, previousValue) {
                let selectedOption = event.target[clickedIndex];
                target = selectedOption.value;
                // event.date instanceof moment === true
                para_path = "/target/{target}/from/{start}/to/{end}".format({
                    "target": target,
                    "start": start.format("YYYY-MM-DD"),
                    "end": end.format("YYYY-MM-DD")
                });
                url = "{0}{1}{2}".format(base_url, bath_path, para_path);
                $.get(url, function (data, status) {
                    // data: response from server
                    chart.destroy();
                    chartOptions["series"] = data["series"];
                    chartOptions["title"]["text"] = "Sale {0} With Price".format({
                        "amount": "Amount",
                        "interests": "Interests",
                        "quantity": "Quantity",
                        "rate": "Interests/Amount",
                    }[target]);
                    chart = Highcharts.chart('container', chartOptions);
                });

            }
        );
    </script>


{% endblock %}

